<template>
  <div class="">
    <t-title class="t-m-b-20 t-m-t-20">表格筛选参数组件</t-title>
    <el-button type="primary" size="">主要按钮</el-button>
    <el-button type="primary" size="medium">主要按钮</el-button>
    <el-button type="primary" size="small">主要按钮</el-button>
    <el-button type="primary" size="mini">主要按钮</el-button>
    <t-form-filter
      :options="filterConfig"
      :extend-options="extendFormFilter"
      @reset="resetFormFilter"
      @listen-filter="listenFilter"
    >
      <template slot="more">
        <el-form-item label="审批人">
          <el-input
            placeholder="审批人"
            v-model="extendFormFilter.value"
          ></el-input>
        </el-form-item>
        <el-form-item label="审批人">
          <el-input
            placeholder="审批人"
            v-model="extendFormFilter.value"
          ></el-input>
        </el-form-item>
        <el-form-item label="审批人">
          <el-input
            placeholder="审批人"
            v-model="extendFormFilter.value"
          ></el-input>
        </el-form-item>
        <el-form-item label="审批人">
          <el-input
            placeholder="审批人"
            v-model="extendFormFilter.value"
          ></el-input>
        </el-form-item>
        <el-form-item label="审批人">
          <el-input
            placeholder="审批人"
            v-model="extendFormFilter.value"
          ></el-input>
        </el-form-item>
        <el-form-item label="审批人">
          <el-input
            placeholder="审批人"
            v-model="extendFormFilter.value"
          ></el-input>
        </el-form-item>
      </template>
    </t-form-filter>

    <t-title class="t-m-b-20 t-m-t-20">表格</t-title>
    <t-table-layout>
      <div slot="tools">
        <el-button type="primary" size="small">新增</el-button>
      </div>
      <div slot="right">
        <t-button-group>
          <t-tips-button
            tips="popconfirm"
            title="确认导出数据吗？"
            buttonStyle="button"
            size="small"
            type="success"
            >导出</t-tips-button
          >
        </t-button-group>
      </div>
      <t-table
        ref="table"
        :sortTable="true"
        :url="url"
        :columns="columns"
      ></t-table>
    </t-table-layout>

    <t-title class="t-m-b-20 t-m-t-20">自定义指令</t-title>
    检查是否是整数 ： <el-input v-Int v-model="text"></el-input> 背景水印：
    <div
      style="width: 800px; height: 200px"
      v-waterMarker="{
        text: '版权所有',
        textColor: 'rgba(180, 180, 180, 0.4)',
      }"
    ></div>
    复制:<t-button v-copy="'复制的内容'">一键复制</t-button>
    <t-title class="t-m-b-20 t-m-t-20">dialog</t-title>
    <el-switch
      v-model="showDislog"
      active-color="#13ce66"
      inactive-color="#ff4949"
    >
    </el-switch>
    可拖拽的dialog:
    <el-switch
      v-model="showDragDislog"
      active-color="#13ce66"
      inactive-color="#ff4949"
    >
    </el-switch>
    <t-dialog :drag="false" v-model="showDislog">
      <span>这是一个的dialog</span>
      <div slot="footer">
        <t-button type="danger" size="mini" @click="showDislog = false"
          >关闭</t-button
        >
      </div>
    </t-dialog>
    <t-dialog :drag="true" v-model="showDragDislog">
      <span>这是一个可拖拽的dialog</span>
    </t-dialog>
    <t-title class="t-m-b-20 t-m-t-20">标题头</t-title>
    <div class="t-flex t-flex-wrap">
      <t-title
        v-for="item in ['info', 'primary', 'warning', 'success', 'error']"
        :key="item"
        class="t-m-30"
        :type="item"
        >默认标题头-{{ item }}</t-title
      >
      <t-title
        v-for="(item, index) in [
          'info',
          'primary',
          'warning',
          'success',
          'error',
        ]"
        :key="index"
        class="t-m-30"
        icon="el-icon-eleme"
        :icon-size="30"
        :type="item"
        >自定义icon标题头-{{ item }}</t-title
      >
    </div>

    <t-title class="t-m-b-20 t-m-t-20">富文本</t-title>
    <t-quill v-model="text"></t-quill>
    <t-title class="t-m-b-20 t-m-t-20">图标</t-title>
    <div class="t-flex t-flex-wrap">
      <div
        class="t-margin-5 icons-box  hover-class"
        v-for="item in icons.glyphs"
        :key="item.icon_id"
      >
        <div class="icon-item" @click="changeActive(item)">
          <t-icon
          v-copy="`${icons.css_prefix_text + '' + item.font_class}`"
            size="40"
            color="#547CEC"
            :icon="icons.css_prefix_text + '' + item.font_class"
          ></t-icon>
        </div>
        <p class="icon-name" >{{icons.css_prefix_text + '' + item.font_class}}</p>
      </div>
    </div>

    <t-title class="t-m-b-20 t-m-t-20">按钮</t-title>
    <t-button-group>
      <el-button type="primary" transition="none"
        >普通按钮(transition="none")</el-button
      >
      <t-button type="danger" transition="debounce"
        >带防抖功能按钮(transition="debounce") 请狂点</t-button
      >
      <t-button type="success" transition="loading" @click="loadingClick"
        >带loading按钮(transition="loading")</t-button
      >
    </t-button-group>

    <t-title class="t-m-b-20 t-m-t-20">带提示按钮组件</t-title>
    <div class="t-flex">
      <div class="t-font-20 t-m-r-20">el-link 风格</div>
      <t-button-group>
        <t-tips-button class="t-m-r-5" tips="popconfirm" title="popconfirm" type="primary">
          popconfirm
        </t-tips-button>
        <t-tips-button class="t-m-r-5" tips="tooltip" title="tooltip" type="success">
          tooltip
        </t-tips-button>
        <t-tips-button class="t-m-r-5" tips="confirm" type="info"> confirm </t-tips-button>
        <t-tips-button  class="t-m-r-5" type="danger"> defualt </t-tips-button>
      </t-button-group>
    </div>
    <div class="t-flex">
      <div class="t-font-20 t-m-r-20">el-button 风格</div>
      <t-button-group>
        <t-tips-button
          component="el-button"
          tips="popconfirm"
          title="popconfirm"
          type="primary"
           class="t-m-r-5"
        >
          popconfirm
        </t-tips-button>
        <t-tips-button
          component="el-button"
          tips="tooltip"
          title="tooltip"
          type="success"  class="t-m-r-5"
        >
          tooltip
        </t-tips-button>
        <t-tips-button  class="t-m-r-5" tips="confirm" component="el-button" type="info">
          confirm
        </t-tips-button>
        <t-tips-button  class="t-m-r-5" component="el-button" type="danger">
          defualt
        </t-tips-button>
      </t-button-group>
    </div>

    <t-title class="t-m-b-20 t-m-t-20">表单mixin</t-title>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
    >
      <el-form-item label="名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item>
        <t-button @click="resetForm('ruleForm')">重置</t-button>
        <t-button type="success" @click="submitForm">提交</t-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import form from "@/mixins/form";
import list from "@/mixins/list";
import validator from "@/utils/validator.js";
import icons from "@/config/iconfont.json";
export default {
  components: {},
  mixins: [list, form],
  data() {
    return {
      icons,
      showDislog: false,
      showDragDislog: false,
      text: "",
      filterConfig: [
        {
          label: "名词性",
          value: "mcz",
          defualValue: "",
          placeholder: "名词性",
          type: "text",
        },
        {
          label: "请选择",
          value: "qxs",
          defualValue: "",
          placeholder: "请选择",
          data: [
            {
              value: "value1",
              label: "label1",
            },
            {
              value: "value2",
              label: "label2",
            },
            {
              value: "value3",
              label: "label3",
            },
          ],
          type: "select",
        },
      ],
      extendFormFilter: {
        //扩展的筛选项
        value1: "",
        value2: "",
      },
      url: "/RoleInfo/Get", //列表请求接口
      deleteApi: "", //删除接口 在api  配置的接口
      columns: [
        //列配置
        {
          prop: "id",
          label: "ID",
          width: "130",
        },
        {
          prop: "name",
          label: "名称",
        },
        {
          prop: "name1",
          label: "名称1",
        },
        {
          prop: "",
          label: "操作",
          render: (h, parmas) => {
            return (
              <t-button-group>
                <t-tips-button
                  tips="popconfirm"
                  title="popconfirm"
                  type="primary"
                >
                  popconfirm
                </t-tips-button>
                <t-tips-button tips="tooltip" title="tooltip" type="success">
                  tooltip
                </t-tips-button>
                <t-tips-button type="info" tips="confirm">
                  confirm
                </t-tips-button>
                <t-tips-button type="danger">删除</t-tips-button>
              </t-button-group>
            );
          },
        },
      ],
      ruleForm: {
        name: "",
      },
      rules: {
        name: [
          { required: true, message: "请选择活动资源", trigger: "blur" },
          { validator: validator.code, trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    console.log("sss");
  },
  methods: {
    loadingClick(done) {
      setTimeout(() => {
        done();
      }, 1000);
    },
    selectionChange(e) {
      console.log(e);
    },
    submitForm() {
      this.handleSubmit(this.$http.RoleInfoDelete(this.form)).then((res) => {
        //请求成功
      });
    },
  },
  watch: {
    // text(v){console.log(v)}
  },
};
</script>

<style lang="scss" scoped>
.icon-name {
    font-size: 10px;
    margin: 0;
    line-height: 1.4;
    width: 100%;
    text-align: center;
    @include text-overflow(2);
  }
  .icons-box {
    width: 70px;
    height: 70px;
    padding: 5px;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    background:#fff;
    color: $type-primary;
  }
</style>